<template>
    <div class="app-container">
        <div class="item">
            <div class="title">
                用户需求是否存在某些规律
            </div>
            <div class="chart">
                <multi-line-chart :data="reqList" ></multi-line-chart>
            </div>
            <div class="conclusion">
                发现用户的请求数及订单数呈周期性的规律，在某段时间达到最大值，过段时间在回跌
            </div>
        </div>

        <div class="item">
            <div class="title">
                不同时段的请求数
            </div>
            <div class="chart">
                <multi-line-chart2 :data="hourList" ></multi-line-chart2>
            </div>
            <div class="conclusion">
                在12点有出行意向的用户最多，其次是在13点出行，在11点有出行意向的用户相对较少。中午出行有可能是打车去吃饭
            </div>
        </div>

        <div class="item">
            <div class="title">
                请求订单数与取消订单数
            </div>
            <div class="chart">
                <scatter :data="hourUtilizList" ></scatter>
            </div>
            <div class="conclusion">
                请求数越大，取消订单数接近线性规律，表明平台订单承载量有待提高
            </div>
        </div>

        <div class="item">
            <div class="title">
                司机在忙率与请求不满足率的关系
            </div>
            <div class="chart">
                <scatter :data="diffList" ></scatter>
            </div>
            <div class="conclusion">
                结果表明：司机在忙率与请求不满足率呈中等相关关系，正相关。司机在忙率集中30%-60%。
            </div>
        </div>
    </div>
</template>
  
<script>
import { requestTripList, hourTrip, hourUtiliz, diff } from "@/api/summary";
import MultiLineChart from './components/multi-line.vue';
import MultiLineChart2 from './components/multi-line2.vue';
import Scatter from './components/scatter.vue';
export default {
    name: "UserInfo",
    // 组件
    components: {
        MultiLineChart,
        MultiLineChart2,
        Scatter
    },
    // 数据
    data() {
        return {
            reqList:[],
            hourList:[],
            hourUtilizList:[],
            diffList:[]
        };
    },
    // 监听
    watch: {},
    // 构造函数
    created() {
        this.requestTripList();
        this.hourTrip()
        this.hourUtiliz()
        this.diff()
    },
    // 函数方法
    methods: {
        requestTripList() {
            requestTripList().then(res => {
                this.reqList = res.data
                console.log(this.reqList)
            })
        },
        hourTrip() {
            hourTrip().then(res => {
                this.hourList = res.data
            })
        },
        hourUtiliz() {
            hourUtiliz().then(res => {
                this.hourUtilizList = res.data
            })
        },
        diff() {
            diff().then(res => [
                this.diffList = res.data
            ])
        }
    },
};
</script>

<style scoped lang="scss">
.app-container {
    overflow-y: scroll;
    .item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 20px 0 20px  20px;
        .title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
            text-align: center;
        }
        .conclusion {
            font-size: 16px;
            color: rgb(47, 58, 58);
            margin-bottom: 30px;
        }
    }
}
.chart {
    width: 90%;
}
</style>
  